<!--/**
*活跃用户人数2*
*
* @author LWG
* @date 2022/8/9 16:29
* @since 1.0.0
*/-->
<template>
  <div>
    <el-row>

      <el-card>
        <el-button class="btn btnStyle1" @click="button1">实时数据</el-button>
        <el-button class="btn btnStyle1" @click="button2" type="primary" plain>数据分析</el-button>
        <!-- <el-button class="btn btnStyle1" @click="button3">访问次数</el-button> -->

        <div id="numb2" style="width: 100%; height: 900px"></div>
      </el-card>
    </el-row>

  </div>

</template>

<script>
import * as echarts from 'echarts';

export default {
  name: "NumberOAUsers2",
  data() {
    return {
      showNum: 1,
      sureDelBox: ' '
    }
  },
  methods: {
    button1() {
      // console.log("实时数据")
      this.showNum = 1
      this.$router.push('/home/numberOAUsers');
    },
    button2() {
      // console.log("数据分析")
      this.$router.push('/NumberOAUsers2');
    },
    button3() {
      this.$router.push('/test');

    }
  },

  mounted(item) {
    var chartDom = document.getElementById('numb2');
var myChart = echarts.init(chartDom);
var option;

option = {
  color: ['#67F9D8', '#FFE434', '#56A3F1', '#FF917C'],
  title: {
    text: '活跃用户数据分析'
  },
  legend: {},
  radar: [
    {
      indicator: [
        { text: '今日' },
        { text: '昨日' },
        { text: '前天' },
        { text: '前1天' },
        { text: '前2天' }
      ],
      center: ['25%', '50%'],
      radius: 120,
      startAngle: 90,
      splitNumber: 4,
      shape: 'circle',
      axisName: {
        formatter: '【{value}】',
        color: '#428BD4'
      },
      splitArea: {
        areaStyle: {
          color: ['#77EADF', '#26C3BE', '#64AFE9', '#428BD4'],
          shadowColor: 'rgba(0, 0, 0, 0.2)',
          shadowBlur: 10
        }
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(102,51,204, 0.8)'
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(211, 253, 250, 0.8)'
        }
      }
    },
    {
      indicator: [
        { text: '今日', max: 150 },
        { text: '昨日', max: 150 },
        { text: '前日', max: 150 },
        { text: '前1日', max: 120 },
        { text: '前2日', max: 108 },
        { text: '前3日', max: 72 }
      ],
      center: ['75%', '50%'],
      radius: 120,
      axisName: {
        color: '#fff',
        backgroundColor: '#666',
        borderRadius: 3,
        padding: [3, 5]
      }
    }
  ],
  series: [
    {
      type: 'radar',
      emphasis: {
        lineStyle: {
          width: 4
        }
      },
      data: [
        {
          value: [100, 8, 0.4, -80, 2000],
          name: '登录人数'
        },
        {
          value: [60, 5, 0.3, -100, 1500],
          name: '在线人数',
          areaStyle: {
            color: 'rgba(255, 228, 52, 0.6)'
          }
        }
      ]
    },
    {
      type: 'radar',
      radarIndex: 1,
      data: [
        {
          value: [120, 118, 130, 100, 99, 70],
          name: '求助活跃度',
          symbol: 'rect',
          symbolSize: 12,
          lineStyle: {
            type: 'dashed'
          },
          label: {
            show: true,
            formatter: function (params) {
              return params.value;
            }
          }
        },
        {
          value: [100, 93, 50, 90, 70, 60],
          name: '分享活跃度',
          areaStyle: {
            color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
              {
                color: 'rgba(255, 145, 124, 0.1)',
                offset: 0
              },
              {
                color: 'rgba(255, 145, 124, 0.9)',
                offset: 1
              }
            ])
          }
        }
      ]
    }
  ]
};
    myChart.setOption(option);

  }

}
</script>

<style>
.btnStyle1 {
  width: 120px;
  height: 50px;
  border-radius: 20px;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 30px;

}
</style>

